<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<%@ include file="/WEB-INF/views/include/header.jsp"%>
<link href="${ctxStatic}/ajax/libs/jquery-layout/jquery.layout-latest.css" rel="stylesheet"/>
<link href="${ctxStatic}/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css" rel="stylesheet"/>

<style type="text/css">

	.dropdown {
		float: left;
		overflow: hidden;
	}

	.dropdown .dropbtn {
		cursor: pointer;
		font-size: 16px;
		border: none;
		outline: none;
		color: white;
		padding: 14px 16px;
		background-color: inherit;
	}

	.container a:hover, .dropdown:hover .dropbtn {
		background-color: red;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 24px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.dropdown-content a {
		float: none;
		color: black;
		padding: 12px 12px;
		text-decoration: none;
		line-height:4px;
		border-bottom: 1px solid #a5a2a2bd;
		display: block;
		text-align: left;
	}

	.dropdown-content a:hover {
		background-color: #ddd;
	}
	.show {
		display: block;
	}
</style>

<body class="gray-bg">

	<div class="ui-layout-west">
		<div class="main-content">
			<div class="box box-main">
				<div class="box-header">
					<div class="box-title">
						<i class="fa icon-grid"></i> 栏目管理
					</div>
					<div class="box-tools pull-right">
						<a type="button" class="btn btn-box-tool menuItem" href="#" onclick="categoryTree()" title="组织栏目"><i class="fa fa-edit"></i></a>
						<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
						<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
						<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button>
					</div>
				</div>
				<div class="ui-layout-content">
					<div id="tree" class="ztree"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="container-div ui-layout-center">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="user-form">
					<input type="hidden" id="catId" name="catId">
					<input type="hidden" id="parentId" name="parentId">
					<div class="select-list">
						<ul>
							<li>
								标题：<input type="text" name="title"/>
							</li>
							<li>
								发布人：<input type="text" name="author"/>
							</li>
							<li>
								状态：<select name="status" >
								<option value="">所有</option>
								<c:forEach items="${fnc:getDictDataByTypeList('sys_normal_disable')}" var="dict">
									<option value="${dict.dictValue}">${dict.dictLabel}</option>
								</c:forEach>
							</select>
							</li>
							<li class="select-time">
								<label>发布时间： </label>
								<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
								<span>-</span>
								<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>

<%--onclick="$.operate.addTab()"--%>
		<div class="btn-group-sm hidden-xs" id="toolbar" role="group">
			<a class="btn btn-success dropbtn" onclick="myFunction()" >
				<i class="fa fa-plus"></i> 添加
			</a>
			<div class="dropdown-content" id="myDropdown">
				<c:forEach items="${fnc:getDictDataByTypeList('cms_model_type')}" var="dict">

					<c:if test="${dict.dictValue=='news'}">
						<a onclick="addDirectPage('${dict.dictValue}')">${dict.dictValue}-${dict.dictLabel}</a>
					</c:if>
				</c:forEach>
			</div>


			<a class="btn btn-primary btn-edit disabled" onclick="$.operate.editTab()">
	            <i class="fa fa-edit"></i> 修改
	        </a>
			<a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()" >
				<i class="fa fa-remove"></i> 删除
			</a>
		</div>
			
		<div class="col-sm-12 select-table table-striped">
			<table id="bootstrap-table" data-mobile-responsive="true"></table>
		</div>
     </div>
	</div>
    <%@ include file="/WEB-INF/views/include/footer.jsp"%>
	<script src="${ctxStatic}/ajax/libs/jquery-layout/jquery.layout-latest.js"></script>
	<script src="${ctxStatic}/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>

	<script language="JavaScript">


        /* 点击按钮，下拉菜单在 显示/隐藏 之间切换 */
        function myFunction() {
            document.getElementById("myDropdown").classList.toggle("show");
        }

        // 点击下拉菜单意外区域隐藏
        window.onclick = function(e) {
            if (!e.target.matches('.dropbtn')) {
                var myDropdown = document.getElementById("myDropdown");
                if (myDropdown.classList.contains('show')) {
                    myDropdown.classList.remove('show');
                }
            }
        }


        var editFlag =  1;
        var removeFlag =  1;
        var prefix = ctx + "cms/cmsNews";

        $(function() {
            var options = {
                code: "catId",
                parentCode: "parentId",
                uniqueId: "catId",
                expandAll: false,
                expandFirst: true,
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                modalName: "文档内容",
                columns: [{
		            checkbox: true
		        },
				{
					field : 'contentId', 
					title : '内容编号' 
				},

				{
					field : 'title',
					title : '标题'
				},
				{
					field : 'publishDate',
					title : '发布时间'
				},
				{
					field : 'priority',
					title : '优先级'
				},
				{
					field : 'checkStatus',
					title : '状态'
				},
		        {
		            title: '操作',
		            align: 'center',
		            formatter: function(value, row, index) {
		            	var actions = [];
		            	actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.editTab(\'' + row.contentId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="genStatic(\'' + row.contentId + '\',\''+ row.catId +'\')"><i class="fa fa-edit"></i>生成</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.contentId + '\')"><i class="fa fa-remove"></i>删除</a>');
						return actions.join('');
		            }
		        }]
            };
           $.table.init(options);
        });

        $(function() {
            $('body').layout({ west__size: 185 });
            queryCategoryTree();
        });

        function queryCategoryTree()
        {
            var url = ctx + "cms/category/treeData";
            var options = {
                url: url,
                expandLevel: 2,
                onClick : zOnClick
            };
            $.tree.init(options);

            function zOnClick(event, treeId, treeNode) {
                $("#catId").val(treeNode.id);
                $("#parentId").val(treeNode.pId);
                $.treeTable.search();
            }
        }

        function addDirectPage(type){
            //新闻
            if(type=="news"){
				var url = prefix + "/add";
                $.modal.openTab("添加文档内容", url);
			}
			//图片
            if(type=="photo"){

            }
        }


        function genStatic(contentId,catId){
            var data = {"catId":catId,"contentId":contentId};
            $.operate.save("/cms/genStatic/genNews",data );
		}



        $('#btnExpand').click(function() {
            $._tree.expandAll(true);
            $(this).hide();
            $('#btnCollapse').show();
        });

        $('#btnCollapse').click(function() {
            $._tree.expandAll(false);
            $(this).hide();
            $('#btnExpand').show();
        });

        $('#btnRefresh').click(function() {
            queryCategoryTree();
        });

        /*栏目管理-栏目*/
        function categoryTree() {
            var url = ctx + "cms/category";
            createMenuItem(url, "栏目管理");
        }

    </script>
</body>
</html>